<script setup lang="ts">
const router = useRouter()
const go = (target: string) => router.push(target)

const pswd0 = ref('')
const pswd1 = ref('')

const startIndex = ref('0')
const validatorNumber = ref('1')

const next = () => {
  if (pswd0.value != pswd1.value) {
    alert('Check your password!')
    return 
  }
  if (!pswd0.value) {
    alert('Empty password!')
    return
  }
  if (pswd0.value.length < 6) {
    alert('Password too short!')
    return
  }
  localStorage.setItem('password', pswd0.value)
  localStorage.setItem('start_index', startIndex.value)
  localStorage.setItem('validator_number', validatorNumber.value)
  go('/save-keystore')
}
</script>

<template>
  <div class="page-pswd">
    <div class="card">
      <div class="title">Step (2/4): Keystore Setting</div>
      <div class="mt-2">
        <div class="line">
          <div class="col">Start Index</div>
          <div class="col">Validator Number</div>
        </div>
        <div class="line">
          <div class="col">
            <input v-model="startIndex" class="input-pswd" type="number" />
          </div>
          <div class="col">
            <input v-model="validatorNumber" class="input-pswd" type="number" />
          </div>
        </div>
      </div>
      <div class="mt-2">Set password for you key store</div>
      <input v-model="pswd0" class="input-pswd" type="password" placeholder="input your password" />
      <input v-model="pswd1" class="input-pswd" type="password" placeholder="confirm your password" />
      <div class="btn-in-card mt-1" @click="next">Next</div>
    </div>
  </div>
</template>

<style scoped>
.page-pswd {
  padding: 15px;
}

.input-pswd {
  width: 100%;
  margin: 8px 0;
  height: 3rem;
  padding: 1rem;
  border-radius: 7px;
}
.col {
  flex-grow: 1;
  margin-right: 15px;
  flex-basis: 0;
  white-space: nowrap;
}
</style>